Joney Li

关于构建🧪实验室

在之前的版本中 11月的期刊中，我提到了使用bable 仅此一个插件来做，试验场，但是这样的不完善的，比如TS和其他功能，UI的试验场和框架的试验场，都没有办法做，所以可以选择使用Vite 去处理

先给结论，我认为是一定要写的，最近在项目上遇到一个问题，就是线上我能够同构DevTools 来查看功能或则扩展，**能够不动代码就能完成业务可行性的判断，**我的意思是，你可以在线上看到每个组件的数据，如果要动要改，现在的数据是否就够用了

对此我们有这样的代码

const SellerStoreBannerItem = () => {
  return (<>
    <div>6666</div>>
    <>)
}
SellerStoreBannerItem.displayName = 'SellerStoreBannerItem';

如果你写了那么不管是本地调试和PRD版本都能看到具体的组件，而不是一些简化的字母, 或者全都是匿名的组件非常不好找，和调试

在做 “GA4 迁移 ”的这个过程中，已经发现有两次是分析问题不够仔细，没有找到根源导致瞎改的情况出现了，具体的情况如下

在分析 sellerStore中 Swiper 组件的时候，发现马上触发了两次 promation 事件，并不是展示一次才触发一次。参考HeroBanner 分析第一次的原因是由于 IntersectionObserver 中的根元素绑定不正确所致，于是就瞎改去了，然后本地调试，发现还是有问题。第二次分析之后，我到 HerorBanner 的dev 环境去打debugger去了，现在它是在第一张图出现的时候触发一个 IntersectionObserver 中的promistion ，而且这个根原属不是挂到图片上的，而是那个外面的容器上，以此来表示 这是第一个图片 ，然后Swiper 上有一个silder change 事件到这里面又进行来触发，发送promistion ，并且把触发过之后存储下来，所以这才是原理！本因

第二个问题是分析 pc builder 的时候发现有数据问题，分析第一次的时候发现应该是逻辑问题，然后去找接口准备改接口来。但是冷静分析之后发现不是逻辑的问题，就是数据的问题，我的逻辑没有问题。

这两件事情，都说明：“分析能力不够，不够冷静” 没有把握关键！‼️